<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>点击</button>
  <script>
    /*
    事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为(注册事件)

    语法：元素对象.addEventListener('事件类型', 要执行的函数)

    事件监听三要素：
      1.事件源：(谁被触发了)，哪个dom元素被事件触发了，要获取dom元素
      2.事件类型：(用什么方式触发)，比如单击鼠标click、鼠标经过mouseover等
      3.事件调用的函数：(要做什么事)
    */

    // 需求：点击了按钮，弹出一个对话框
    // 1.事件源  按钮
    // 2.事件类型  点击鼠标
    // 3.事件处理程序  弹出对话框
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你好骚啊~')
    })
  </script>
</body>

</html>